import React from 'react';

import styled from 'styled-components';

const ModalContainer = styled.div`
  display: ${props => props.display ? 'block' : 'none'};
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
`;

const ModalBackground = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.2;
  background-color: #000;
  z-index: 0;

`

const ModalContent = styled.div`
  width: 80%;
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #fff;
`

const ModalCloseButton = styled.button`
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  color: #333;

  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 20px;
`

class Modal extends React.Component {

  close = () => {
    return this.props.allowBackgroundClick ? this.props.close() : null;
  }

  render() {
    const {isOpen, close, children} = this.props;
    return (
      <ModalContainer display={isOpen}>
        <ModalBackground display={isOpen} onClick={this.close} />
        <ModalContent>
          <ModalCloseButton onClick={close}>x</ModalCloseButton>
          
        </ModalContent>
      </ModalContainer>
    )
  }
}

Modal.defaultProps = {
  allowBackgroundClick: false
}

export default Modal;
